<ng-template #extra>
  <button nz-button (click)="handleCancel()" style="margin-right:10px;">
    取消
  </button>
  <button nz-button nzType="primary" (click)="submit()">
    <i nz-icon nzType="save" nzTheme="outline"></i>
    保存
  </button>
</ng-template>

<nz-card [nzTitle]="id ? '编辑角色' : '创建角色'" [nzExtra]="extra">

   

  <form nz-form [formGroup]="group" (ngSubmit)="submit()">


    <nz-form-item *ngIf="!id">
      <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="id" nzRequired>Id</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="idErrorTpl">
        <input nz-input formControlName="id" />
        <ng-template #idErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入id!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
    
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="name">名称</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="nameErrorTpl">
        <input nz-input formControlName="name" />
        <ng-template #nameErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请输入名称!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>

      
    <nz-form-item>
      <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired>权限</nz-form-label>
      <nz-form-control [nzSm]="14" [nzXs]="24" [nzErrorTip]="privilegesErrorTpl">
        <nz-select nzMode="multiple" [nzOptions]="listOfOption" name="privileges"
          formControlName="privileges" nzShowSearch nzAllowClear></nz-select>
        <ng-template #privilegesErrorTpl let-control>
          <ng-container *ngIf="control.hasError('required')">请确定角色权限!</ng-container>
        </ng-template>
      </nz-form-control>
    </nz-form-item>
  </form>
</nz-card>